<template>
  <div class="index-column">
    <div class="container">
      <a-anchor
        :get-container="() => node"
        :affix="false"
        @click="e => e.preventDefault()"
      >
        <a-anchor-link
          v-for="link in options"
          :key="link"
          :href="`#${cascaderName}-daas-cascader-${link}`"
          :title="link"
        />
      </a-anchor>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    containerNode: {
      type: null,
      default: () => window
    },
    cascaderName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      node: window
    };
  },
  watch: {
    containerNode(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getContainer();
      }
    }
  },
  mounted() {
    this.getContainer();
  },
  methods: {
    getContainer() {
      if (!this.containerNode) {
        this.node = window;
        return;
      }
      this.node = this.containerNode;
    }
  }
};
</script>

<style lang="less" scoped>
.index-column {
  height: 100%;
  width: 36px;
  background: #f6f7fa;
  border-right: 1px solid #ecedf2;
  overflow: hidden;

  .container {
    width: 44px;
    height: 100%;
    overflow: auto;
  }
  .ant-anchor-wrapper {
    padding: 0;
    margin: 0;
    background: #f6f7fa;
    .ant-anchor-link {
      padding: 5px 0;
      width: 36px;
      text-align: center;
    }
  }
}
</style>
